<template>
  <div class="bg-white">
    <el-page-header :content="title" @back="back"></el-page-header>
    <el-form ref="form" class="pa-10" :model="form" label-width="80px" style="margin-top: 20px">
      <el-form-item label="报告名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="报告类型">
            <el-select v-model="form.region" placeholder="请选择报告类型" style="width: 100%">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报告时间">
            <el-col :span="11">
              <el-select v-model="form.frequence" placeholder="请选择" style="width: 100%">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-col>
            <el-col :span="2" style="text-align: center"> - </el-col>
            <el-col :span="11">
              <el-time-picker v-model="form.date2" placeholder="选择时间" style="width: 100%"></el-time-picker>
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="报告描述">
        <el-input v-model="form.desc" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="报告模板"> 报告的模板 </el-form-item>
      <el-row>
        <div>
          <p class="bold">推送用户</p>
          <el-button v-if="type !== 'view'" icon="el-icon-plus" size="mini" type="primary" @click="addUser"
            >添加</el-button
          >
          <div class="selectData">
            <el-tag
              v-for="tag in userData"
              :key="tag.id"
              :closable="type !== 'view'"
              style="margin-right: 20px; margin-bottom: 10px"
              @close="handleClose(tag, 2)"
            >
              {{ tag.nickName || tag.name }}
            </el-tag>
          </div>
          <p class="bold">推送角色</p>
          <el-button v-if="type !== 'view'" icon="el-icon-plus" size="mini" type="primary" @click="addRole"
            >添加</el-button
          >
          <div class="selectData">
            <el-tag
              v-for="tag in roleData"
              :key="tag.id"
              :closable="type !== 'view'"
              style="margin-right: 20px; margin-bottom: 10px"
              @close="handleClose(tag, 1)"
            >
              {{ tag.roleName || tag.name }}
            </el-tag>
          </div>
        </div>
      </el-row>
      <el-form-item>
        <el-button size="mini">取 消</el-button>
        <el-button size="mini" type="primary">保 存</el-button>
      </el-form-item>
    </el-form>
    <userDialog
      v-if="userDialogVisable"
      :dialog-visible="userDialogVisable"
      :user-data="userData"
      @closeUser="closeUser"
    ></userDialog>
  </div>
</template>

<script>
import userDialog from './dialog/userDialog.vue'
export default {
  components: {
    userDialog,
  },
  props: {},
  data() {
    return {
      roleDialogVisable: false,
      userDialogVisable: false,
      title: '报告详情',
      form: {},
      roleData: [],
      userData: [],
    }
  },
  created() {},
  methods: {
    back() {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$router.back()
      })
    },
    addUser() {
      this.userDialogVisable = true
    },
    closeUser(val) {
      this.userData = this.userData.concat(val)
      this.userDialogVisable = false
    },
    addRole() {
      this.roleDialogVisable = true
    },
    closeRole(val) {
      this.roleData = this.roleData.concat(val)
      this.roleDialogVisable = false
    },
    handleClose(tag, type) {
      if (type == 1) {
        this.roleData.splice(this.roleData.indexOf(tag), 1)
        return
      }
      this.userData.splice(this.userData.indexOf(tag), 1)
    },
  },
}
</script>

<style scoped lang="scss">
::v-deep .el-page-header {
  background-color: #ffff;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}
::v-deep .el-page-header__content {
  font-size: 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  color: #262626;
}
.bg-white {
  min-height: 100%;
}
.bold {
  font-weight: bolder;
  margin: 20px 0;
}
.selectData {
  margin: 20px;
  .item {
    height: 20px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    display: inline-block;
  }
}
</style>
